<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 头碎片-->
<head th:replace="fragment/Headfragment::Headfragment">
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- Styles -->
    <link href="datamap/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="datamap/css/lib/themify-icons.css" rel="stylesheet">
    <link href="datamap/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="datamap/css/lib/sidebar.css" rel="stylesheet">
    <link href="datamap/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="datamap/css/lib/nixon.css" rel="stylesheet">
    <link href="datamap/css/style.css" rel="stylesheet">

</head>
<body>
  <div class="container-scroller">
    <!-- 页面头部碎片 -->
    <nav th:replace="fragment/PageHeadfragmeng::PageHeadfragment"></nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <!-- 侧边栏页面 -->
     <nav th:replace="fragment/PageSidebarfragment::PageSidebarfragment"></nav>
      <!-- partial -->
      <div class="main-panel">
          <div class="content-wrapper">
          <div class="page-header">
              <h3 class="page-title">
              <span class="page-title-icon bg-gradient-primary text-white mr-2">
                <i class="mdi mdi-home"></i>
              </span>
                  主页
              </h3>
              <nav aria-label="breadcrumb">
                  <ul class="breadcrumb">
                      <li class="breadcrumb-item active" aria-current="page">
                          <span></span>Overview
                          <i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
                      </li>
                  </ul>
              </nav>
          </div>
          <div class="col-12">
          <div class="row">
              <div class="col-md-4 stretch-card grid-margin">
                  <div class="card bg-gradient-danger card-img-holder text-white">
                      <div class="card-body">
                          <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                          <h4 class="font-weight-normal mb-3">当前在线客户
                              <i class="mdi mdi-account mdi-24px float-right"></i>
                          </h4>
                          <h2 class="mb-5" th:text="${session.OnlineCustomerNum}"></h2>
                          <h6 class="card-text" th:text="'客户总数：'+${session.CustomerNum}"></h6>
                      </div>
                  </div>
              </div>
              <div class="col-md-4 stretch-card grid-margin">
                  <div class="card bg-gradient-info card-img-holder text-white">
                      <div class="card-body">
                          <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                          <h4 class="font-weight-normal mb-3">当前在线客服
                              <i class="mdi mdi-account-multiple mdi-24px float-right"></i>
                          </h4>
                          <h2 class="mb-5" th:text="${session.OnlineCustomerServiceNum}"></h2>
                          <h6 class="card-text" th:text="${'客服总数：'+session.CustomerServiceNum}"></h6>
                      </div>
                  </div>
              </div>
              <div class="col-md-4 stretch-card grid-margin">
                  <div class="card bg-gradient-success card-img-holder text-white">
                      <div class="card-body">
                          <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                          <h4 class="font-weight-normal mb-3">共在线时间
                              <i class="mdi mdi-bookmark-outline mdi-24px float-right"></i>
                          </h4>
                          <h2 th:text="${session.cs.getTotalonlinetime()}" class="mb-5"></h2>
                          <h3  th:text="${'总接单数:'+session.cs.getSessioncount()}" class="font-weight-normal mb-3"></h3>
                      </div>
                  </div>
              </div>
          </div>
          </div>
          <div class="row">

              <div class="col-md-7 grid-margin stretch-card">
                  <div class="card">
                      <div class="card-body">
                          <div class="clearfix">
                              <h4 class="card-title float-left">工作概况</h4>
                              <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                          </div>
                          <canvas id="visit-sale-chart" class="mt-4"></canvas>
                      </div>
                  </div>
              </div>


              <div class="col-md-5 grid-margin stretch-card">
                  <div class="card">
                      <div class="card-body">
                          <h4 class="card-title">客户来源</h4>
                          <canvas id="traffic-chart"></canvas>
                          <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"></div>
                      </div>
                  </div>
              </div>

          </div>


          <div class="row">
              <div class="col-lg-12">
                  <div class="card alert">
                      <div class="header">
                          <h4>客户分布</h4>

                      </div>
                      <div class="datamap">
                          <div id="world-datamap"></div>
                      </div>
                  </div><!-- /# card -->
              </div><!-- /# column -->
          </div>


          </div> <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="vendors/js/vendor.bundle.base.js"></script>
  <script src="vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script src="js/off-canvas.js"></script>
  <script src="js/misc.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="js/dashboard.js"></script>
  <!-- End custom js for this page-->
  <script th:inline="javascript">
      (function($) {
          'use strict';
          $(function() {
              Chart.defaults.global.legend.labels.usePointStyle = true;

              if ($("#serviceSaleProgress").length) {
                  var bar = new ProgressBar.Circle(serviceSaleProgress, {
                      color: 'url(#gradient)',
                      // This has to be the same size as the maximum width to
                      // prevent clipping
                      strokeWidth: 8,
                      trailWidth: 8,
                      easing: 'easeInOut',
                      duration: 1400,
                      text: {
                          autoStyleContainer: false
                      },
                      from: { color: '#aaa', width: 6 },
                      to: { color: '#57c7d4', width: 6 }
                  });

                  bar.animate(.65);  // Number from 0.0 to 1.0
                  bar.path.style.strokeLinecap = 'round';
                  let linearGradient = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="20%" stop-color="#da8cff"/><stop offset="50%" stop-color="#9a55ff"/></linearGradient></defs>';
                  bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
              }
              if ($("#productSaleProgress").length) {
                  var bar = new ProgressBar.Circle(productSaleProgress, {
                      color: 'url(#productGradient)',
                      // This has to be the same size as the maximum width to
                      // prevent clipping
                      strokeWidth: 8,
                      trailWidth: 8,
                      easing: 'easeInOut',
                      duration: 1400,
                      text: {
                          autoStyleContainer: false
                      },
                      from: { color: '#aaa', width: 6 },
                      to: { color: '#57c7d4', width: 6 }
                  });

                  bar.animate(.6);  // Number from 0.0 to 1.0
                  bar.path.style.strokeLinecap = 'round';
                  let linearGradient = '<defs><linearGradient id="productGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="40%" stop-color="#36d7e8"/><stop offset="70%" stop-color="#b194fa"/></linearGradient></defs>';
                  bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
              }
              if ($("#points-chart").length) {
                  var ctx = document.getElementById('points-chart').getContext("2d");

                  var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
                  gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
                  gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');

                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          labels: [1, 2, 3, 4, 5, 6, 7, 8],
                          datasets: [
                              {
                                  label: "North Zone",
                                  borderColor: gradientStrokeViolet,
                                  backgroundColor: gradientStrokeViolet,
                                  hoverBackgroundColor: gradientStrokeViolet,
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [20, 40, 15, 35, 25, 50, 30, 20]
                              },
                              {
                                  label: "South Zone",
                                  borderColor: '#e9eaee',
                                  backgroundColor: '#e9eaee',
                                  hoverBackgroundColor: '#e9eaee',
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [40, 30, 20, 10, 50, 15, 35, 20]
                              }
                          ]
                      },
                      options: {
                          legend: {
                              display: false
                          },
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      display: false,
                                      min: 0,
                                      stepSize: 10
                                  },
                                  gridLines: {
                                      drawBorder: false,
                                      display: false
                                  }
                              }],
                              xAxes: [{
                                  gridLines: {
                                      display:false,
                                      drawBorder: false,
                                      color: 'rgba(0,0,0,1)',
                                      zeroLineColor: '#eeeeee'
                                  },
                                  ticks: {
                                      padding: 20,
                                      fontColor: "#9c9fa6",
                                      autoSkip: true,
                                  },
                                  barPercentage: 0.7
                              }]
                          }
                      },
                      elements: {
                          point: {
                              radius: 0
                          }
                      }
                  })
              }
              if ($("#events-chart").length) {
                  var ctx = document.getElementById('events-chart').getContext("2d");

                  var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
                  gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                  gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');

                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          labels: [1, 2, 3, 4, 5, 6, 7, 8],
                          datasets: [
                              {
                                  label: "Domestic",
                                  borderColor: gradientStrokeBlue,
                                  backgroundColor: gradientStrokeBlue,
                                  hoverBackgroundColor: gradientStrokeBlue,
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [20, 40, 15, 35, 25, 50, 30, 20]
                              },
                              {
                                  label: "International",
                                  borderColor: '#e9eaee',
                                  backgroundColor: '#e9eaee',
                                  hoverBackgroundColor: '#e9eaee',
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [40, 30, 20, 10, 50, 15, 35, 20]
                              }
                          ]
                      },
                      options: {
                          legend: {
                              display: false
                          },
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      display: false,
                                      min: 0,
                                      stepSize: 10
                                  },
                                  gridLines: {
                                      drawBorder: false,
                                      display: false
                                  }
                              }],
                              xAxes: [{
                                  gridLines: {
                                      display:false,
                                      drawBorder: false,
                                      color: 'rgba(0,0,0,1)',
                                      zeroLineColor: '#eeeeee'
                                  },
                                  ticks: {
                                      padding: 20,
                                      fontColor: "#9c9fa6",
                                      autoSkip: true,
                                  },
                                  barPercentage: 0.7
                              }]
                          }
                      },
                      elements: {
                          point: {
                              radius: 0
                          }
                      }
                  })
              }
              if ($("#visit-sale-chart").length) {
                  Chart.defaults.global.legend.labels.usePointStyle = true;
                  var ctx = document.getElementById('visit-sale-chart').getContext("2d");

                  var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
                  gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
                  gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');
                  var gradientLegendViolet = 'linear-gradient(to right, rgba(218, 140, 255, 1), rgba(154, 85, 255, 1))';

                  var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 360);
                  gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                  gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
                  var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';

                  var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 300);
                  gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
                  gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
                  var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';

                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          labels: ['前端技术支持组', '客服组1', '客服组2', '客服组3', '售前客服组', '售后客服组', '应急事件响应组', '管理组'],
                          datasets: [
                              {
                                  label: "接单数",
                                  borderColor: gradientStrokeViolet,
                                  backgroundColor: gradientStrokeViolet,
                                  hoverBackgroundColor: gradientStrokeViolet,
                                  legendColor: gradientLegendViolet,
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [20, 40, 15, 35, 25, 50, 30, 20]
                              },
                              {
                                  label: "好评数",
                                  borderColor: gradientStrokeRed,
                                  backgroundColor: gradientStrokeRed,
                                  hoverBackgroundColor: gradientStrokeRed,
                                  legendColor: gradientLegendRed,
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [40, 30, 20, 10, 50, 15, 35, 40]
                              },
                              {
                                  label: "在线时间",
                                  borderColor: gradientStrokeBlue,
                                  backgroundColor: gradientStrokeBlue,
                                  hoverBackgroundColor: gradientStrokeBlue,
                                  legendColor: gradientLegendBlue,
                                  pointRadius: 0,
                                  fill: false,
                                  borderWidth: 1,
                                  fill: 'origin',
                                  data: [70, 10, 30, 40, 25, 50, 15, 30]
                              }
                          ]
                      },
                      options: {
                          responsive: true,
                          legend: false,
                          legendCallback: function(chart) {
                              var text = [];
                              text.push('<ul>');
                              for (var i = 0; i < chart.data.datasets.length; i++) {
                                  text.push('<li><span class="legend-dots" style="background:' +
                                      chart.data.datasets[i].legendColor +
                                      '"></span>');
                                  if (chart.data.datasets[i].label) {
                                      text.push(chart.data.datasets[i].label);
                                  }
                                  text.push('</li>');
                              }
                              text.push('</ul>');
                              return text.join('');
                          },
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      display: false,
                                      min: 0,
                                      stepSize: 20,
                                      max: 80
                                  },
                                  gridLines: {
                                      drawBorder: false,
                                      color: 'rgba(235,237,242,1)',
                                      zeroLineColor: 'rgba(235,237,242,1)'
                                  }
                              }],
                              xAxes: [{
                                  gridLines: {
                                      display:false,
                                      drawBorder: false,
                                      color: 'rgba(0,0,0,1)',
                                      zeroLineColor: 'rgba(235,237,242,1)'
                                  },
                                  ticks: {
                                      padding: 20,
                                      fontColor: "#9c9fa6",
                                      autoSkip: true,
                                  },
                                  categoryPercentage: 0.5,
                                  barPercentage: 0.5
                              }]
                          }
                      },
                      elements: {
                          point: {
                              radius: 0
                          }
                      }
                  })
                  $("#visit-sale-chart-legend").html(myChart.generateLegend());
              }
              if ($("#traffic-chart").length) {
                  var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
                  gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                  gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
                  var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';

                  var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 50);
                  gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
                  gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
                  var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';


                  var i=[[${session.i}]];
                  var j=[[${session.j}]];
                  var sum = i+j;
                  i=100*(i/sum);
                  j=100*(j/sum);

                  var trafficChartData = {
                      datasets: [{
                          data: [i,j],



                          backgroundColor: [
                              gradientStrokeBlue,
                              gradientStrokeRed
                          ],
                          hoverBackgroundColor: [
                              gradientStrokeBlue,
                              gradientStrokeRed
                          ],
                          borderColor: [
                              gradientStrokeBlue,
                              gradientStrokeRed
                          ],
                          legendColor: [
                              gradientLegendBlue,
                              gradientLegendRed
                          ]
                      }],

                      // These labels appear in the legend and in the tooltips when hovering different arcs
                      labels: [
                          '客服录入',
                          '网页介入',
                      ]
                  };
                  var trafficChartOptions = {
                      responsive: true,
                      animation: {
                          animateScale: true,
                          animateRotate: true
                      },
                      legend: false,
                      legendCallback: function(chart) {
                          var text = [];
                          text.push('<ul>');
                          for (var i = 0; i < trafficChartData.datasets[0].data.length; i++) {
                              text.push('<li><span class="legend-dots" style="background:' +
                                  trafficChartData.datasets[0].legendColor[i] +
                                  '"></span>');
                              if (trafficChartData.labels[i]) {
                                  text.push(trafficChartData.labels[i]);
                              }
                              text.push('<span class="float-right">'+trafficChartData.datasets[0].data[i]+"%"+'</span>')
                              text.push('</li>');
                          }
                          text.push('</ul>');
                          return text.join('');
                      }
                  };
                  var trafficChartCanvas = $("#traffic-chart").get(0).getContext("2d");
                  var trafficChart = new Chart(trafficChartCanvas, {
                      type: 'doughnut',
                      data: trafficChartData,
                      options: trafficChartOptions
                  });
                  $("#traffic-chart-legend").html(trafficChart.generateLegend());
              }

              if ($("#inline-datepicker").length) {
                  $('#inline-datepicker').datepicker({
                      enableOnReadonly: true,
                      todayHighlight: true,
                  });
              }
          });
      })(jQuery);
  </script>

  <!--<div th:replace="/fragment/datamapScriptFragment::datamapscrptfragment" ></div>-->
  <script src="datamap/js/lib/jquery.min.js"></script><!-- jquery vendor -->
  <script src="datamap/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->
  <script src="datamap/js/lib/sidebar.js"></script><!-- sidebar -->
  <script src="datamap/js/lib/bootstrap.min.js"></script><!-- bootstrap -->
  <script src="datamap/js/lib/mmc-common.js"></script>
  <script src="datamap/js/lib/mmc-chat.js"></script>
  <!--  Datamap -->
  <script src="datamap/js/lib/datamap/d3.min.js"></script>
  <script src="datamap/js/lib/datamap/topojson.js"></script>
  <script src="datamap/js/lib/datamap/datamaps.world.min.js"></script>
  <script src="datamap/js/lib/datamap/datamap-init.js"></script>
  <!-- // Datamap -->
  <script src="datamap/js/scripts.js"></script><!-- scripit init-->

  <script th:inline="javascript">

      (function ($) {
          "use strict";

          var map = new Datamap({
              scope: 'world',
              element: document.getElementById('world-datamap'),
              responsive: true,
              geographyConfig: {
                  popupOnHover: false,
                  highlightOnHover: false,
                  borderColor: 'rgb(48, 194, 208)',
                  borderWidth: 2,
                  highlightBorderWidth: 5,
                  highlightFillColor: '#fff',
                  highlightBorderColor: 'rgba(255,255,255,0.1)',
                  borderWidth: 1,
              },
              bubblesConfig: {
                  popupTemplate: function (geography, data) {
                      return '<div class="datamap-sales-hover-tooltip">' + data.country +'<span class="m-l-5"></span>'+ data.sold + '</div>'
                  },
                  borderWidth: 2,
                  highlightBorderWidth: 5,
                  highlightFillColor: '#fff',
                  highlightBorderColor: 'rgba(255,255,255,0.1)',
                  fillOpacity: 0.3
              },
              fills: {
                  'Visited': 'rgb(0, 131, 143)',
                  'neato': '#fff',
                  'white': '#fff',
                  defaultFill: 'rgb(25, 174, 188)'
              }
          });


          map.bubbles([
              {
                  centered: 'CHN',
                  fillKey: 'white',
                  radius: 10,
                  sold:'50人',
                  country:'china'
              },
              {
                  centered: 'SAU',
                  fillKey: 'white',
                  radius: 5,
                  sold:'',
                  country:'Saudia Arabia'
              },
              {
                  centered: 'RUS',
                  fillKey: 'white',
                  radius: 5,
                  sold:'5人',
                  country:'Russia'
              },
              {
                  centered: 'CAN',
                  fillKey: 'white',
                  radius: 5,
                  sold:'1人',
                  country:'Canada'
              },
              {
                  centered: 'IND',
                  fillKey: 'white',
                  radius: 5,
                  sold:'3人',
                  country:'India'
              },
              {
                  centered: 'AUS',
                  fillKey: 'white',
                  radius: 5,
                  sold:'1人',
                  country:'Australia'
              },
              {
                  centered: 'BGD',
                  fillKey: 'white',
                  radius: 5,
                  sold:'1人',
                  country:'Bangladesh'
              }
          ])


          window.addEventListener('resize', function (event) {
              map.resize();
          });

      })(jQuery);
  </script>

</body>

</html>
